<template>
<div>
	<el-drawer
		:append-to-body="true"
		title="条件设置"
		v-model="store.state.form.conditionDrawer"
		direction="rtl"
		size="550px"
	>
		<p class="shr"></p>
		<div class="el-drawer__body2" >
			<div v-for="(item,index) in Datalist" :key="index">
			<div class="conditions"  :class="Datalist.length>1?'':'conditions2'">
				<div v-if="Datalist.length>1" class="cogroup"> 
					<span>条件组</span><el-icon @click="deletecu(index)"><Delete /></el-icon>
				</div>
				<div v-for="(items,indext) in item.screeningList" :key="indext+items.title">
					<div class="information">
						<span>{{items.title}}</span> 
						<div class="screeningType1" v-if="items.screeningType==1">
							<span :style="items.puslist.length!=0?'color:#000;':''" @click="candidates(index,indext)">{{items.puslist.length!=0? tostrlist(items.puslist):items.placeholder}}</span>
						</div>
						<div v-if="items.screeningType==2" style="display: flex;">
							<el-select v-model="items.tableName" @change="items.tablefield=null" class="m-2" placeholder="选择表" size="small" style="width:100px">
								<el-option
								v-for="itemy in tablestr"
								:key="itemy.tableID"
								:label="itemy.tableDispName"
								:value="itemy.tableName"
								@click="selectret(itemy)"
								/>
							</el-select>
							<el-select v-model="items.tablefield" class="m-2" placeholder="选择字段" size="small" style="width:100px">
								<el-option
								v-for="itemy in fieldData"
								:key="itemy.fieldID"
								:label="itemy.fieldDispName"
								:value="itemy.fieldName"
								/>
							</el-select>
							<el-select v-model="items.contrast" class="m-2" placeholder="操作符" size="small" style="width:100px">
								<el-option
								v-for="itemy in options"
								:key="itemy.value"
								:label="itemy.label"
								:value="itemy.value"
								/>
							</el-select>
							<el-input v-model="items.value" size="small" style="width:100px" ></el-input>
						</div>
						<div v-if="items.screeningType==3" style="display: flex;width: 300px;">
							<el-select v-model="items.maintableuk" class="m-2" placeholder="选择字段" size="small" style="width:200px;">
								<el-option
								v-for="itemy in maintablestr.Fields"
								:key="itemy.fieldID"
								:label="itemy.fieldDispName"
								:value="itemy.fieldName"
								/>
							</el-select>
							<el-select v-model="items.contrast" class="m-2" placeholder="操作符" size="small" style="width:100px">
								<el-option
								v-for="itemy in options"
								:key="itemy.value"
								:label="itemy.label"
								:value="itemy.value"
								/>
							</el-select>
							<el-input v-model="items.value" size="small" style="width:100px" ></el-input>
						</div>
						<el-icon @click="deletexi(index,indext)">
							<Delete />
						</el-icon>
					</div>
					<p style="text-align: center;" v-if="indext!=item.screeningList.length-1">且</p>
				</div>
				<div class="NewConditions">
					<el-button size="default" @click="AddClick(index,item.screeningList)"><el-icon><Plus /></el-icon>添加条件</el-button>
					<p>还有0个可用条件</p>
				</div>
				
			</div>
			<p class="huo" v-if="index!=Datalist.length-1">或</p>
		</div>
	</div>
	<el-button type="primary" class="sbutoon" size="default" @click="addConditions"><el-icon><Plus /></el-icon>添加条件组</el-button>
	<div style="padding: 10px;">
		<el-button type="primary" @click="saveCondition">确 定</el-button>
		<el-button @click="setCondition(false)">取 消</el-button>
	</div>
	</el-drawer>
	<el-dialog v-model="dialogVisible" :title="'选定成员'" width="47%" :before-close="()=>{dialogVisible=false}">
		 <emplteedog @submitsxm="saveMembers" :all="true" @sxdown="(val)=>{dialogVisible=val}"></emplteedog>
	</el-dialog>
	<el-dialog v-model="AddCondition" :title="'添加条件'" width="70%" :before-close="()=>{AddCondition=false}">
		<div>
			<el-checkbox-group v-model="checkList">
				<el-checkbox v-for="item in list" :label="item.title" size="large" />
			</el-checkbox-group>
		</div>
		<div class="demo-drawer__footery">
			<el-button type="primary" @click="conditionsave">确 定</el-button>
			<el-button @click="AddCondition=false">取 消</el-button>
		</div>
	</el-dialog>
	
</div>
</template>

<script>
import { computed, ref, watch,reactive,toRefs } from 'vue';
import { useStore } from '/@/store/index';
import funct from '/@/utils/preload.js';
import XEUtils from 'xe-utils'
import {getUserList} from '/@/api/system/user/index';
import emplteedog from "../dialog/employeesDialog.vue"
export default {
	components:{
            emplteedog
        },
		props:['tableData'],
	setup(props) {
		const store = useStore();
		let dialogVisible = ref(false)
		let AddCondition = ref(false)
		let tableData2 = ref([])
		let specifiedMembert=ref([])
		let x = ref(null)
		let list=ref([{screeningType:1,title:'发起人',placeholder:'请选择具体人员/角色/部门',puslist:[]},{screeningType:2,title:'合计',placeholder:'请输入',value:null,contrast:'1'},{screeningType:3,title:'主数据',placeholder:'请选择字段',puslist:[]}])
		let state = reactive({
			originalData:null,
			Datalist:[{screeningList:[{screeningType:1,title:'发起人',placeholder:'请选择具体人员/角色/部门',puslist:[]},{screeningType:2,title:'合计',placeholder:'请输入',value:null,contrast:'1'}]},{screeningList:[{screeningType:2,title:'合计',placeholder:'请输入',value:null,contrast:'1'}]}]
			,tag1:0,tag2:0,
			tag3:0,
			checkList:[],
			tablestr:[],
			fieldData:[],
			maintablestr:[]
		})
		const addConditions = ()=>{
			state.Datalist.push({})
		}
		watch(()=>{return store.state.form.conditionsConfig},(val)=>{
			console.log(val.value.conditionNodes[val.priorityLevel-1]);
			if(val.value.conditionNodes[val.priorityLevel-1].Datalist){
				let obj = JSON.stringify(val.value.conditionNodes[val.priorityLevel-1].Datalist)
				state.Datalist=JSON.parse(obj)
			}
			state.originalData=val.value
			x.value = val.priorityLevel
		})
		watch(()=>{return props.tableData},()=>{
			if(props.tableData.length!=0){
				let arr =[];
				props.tableData.forEach((item)=>{
					if(item.tableType==1){
						arr.push(item)
					}else if(item.tableType==0){
						state.maintablestr=item
					}
				})
				state.tablestr=arr
			}
		})
		const candidates = (index,indext)=>{
			state.tag1=index;state.tag2=indext
			dialogVisible.value = true
            getUserList().then((res)=>{
				console.log(res);
                tableData2.value=res.data.userList
            })
		}
		let tablemember = ref(null)
		// 删除选中成员
		const removemember =({row})=>{
                specifiedMembert.value.forEach((res,index)=>{
                    if(res==row){
                        specifiedMembert.value.splice(index,1)
                    }
                })
                tablemember.value.loadData(specifiedMembert.value)
        }
		// 成员被选中
		const memberList=({row})=>{
                if(!XEUtils.includes(specifiedMembert.value, row)){
                    specifiedMembert.value.push(row)
                }
                tablemember.value.loadData(specifiedMembert.value)
        }
		const saveMembers = (val,arr)=>{
			state.Datalist[state.tag1].screeningList[state.tag2].puslist=arr
            dialogVisible.value=val
		}
		const tostrlist = (data)=>{
			let str = ''
			data.forEach((item)=>{
                    if(str==''){
                        str= str+item.name
                    }else{
                        str= str + ','+item.name
                    }
                })
				return str
		}
		const AddClick = (index,list)=>{
			state.tag3=index;
			AddCondition.value=true
			if(list){
				list.forEach(v=>{
					state.checkList.push(v.title)
				})
			}
			console.log(state.checkList);
		}
		const conditionsave = ()=>{
			let arr = []
			state.checkList.forEach(v=>{
				list.value.forEach(e=>{
					if(e.title==v){
						arr.push(e)
					}
				})
			})
			state.Datalist[state.tag3].screeningList=JSON.parse(JSON.stringify(arr))
			AddCondition.value=false
			state.checkList=[]
		}
		const deletexi = (index,indext)=>{
			state.Datalist[index].screeningList.splice(indext,1)
		}
		const deletecu = (index)=>{
			state.Datalist.splice(index,1)
		}
		const saveCondition = ()=>{
			console.log(state.originalData);
			state.originalData.conditionNodes[x.value-1]['Datalist']=state.Datalist
			store.commit('updateConditionsConfig',{
				value:{...state.originalData},
                flag:true,
				priorityLevel:x.value,
                id:state.originalData.id
			})
			setCondition()
		}
		const setCondition = ()=>{
			store.commit('updateCondition', false)
		}
		const selectret = (val)=>{
			console.log(val.Fields);
			state.fieldData=val.Fields
		}
		return {
			store,
			dialogVisible,
			specifiedMembert,
			tablemember,
			AddCondition,
			list,
			options:[{ value: '1', label: '大于'},{ value: '2', label: '小于'},{ value: '3', label: '大于等于'},{ value: '4', label: '小于等于'},{ value: '5', label: '等于'}],
			tableData2,
			x,
			addConditions,
			...toRefs(state),
			candidates,
			removemember,
			memberList,
			saveMembers,
			tostrlist,
			AddClick,
			conditionsave,
			deletexi,
			deletecu,
			saveCondition,
			setCondition,
			selectret
		};
	},
};
</script>

<style scoped lang="scss">
.el-drawer__body2 {
	padding: 10px;
	width: 100%;
}
.shr{
    border-top: 1px solid #d1d1d1b4;
}
.conditions{
	border: 1px solid rgba(238, 238, 238,0.6);
	border-radius: 5px;
	overflow: hidden;
	font-size: 14px;
	margin-bottom: 10px;
}
.conditions2{
	border: 1px solid rgba(238, 238, 238,0);
}
.cogroup{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 9px ;
	background-color: rgba(238, 238, 238,0.6);
}
.information{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 10px;
	.screeningType1{
		border: 1px solid rgba(238, 238, 238,0.6);
		width: auto;
		padding: 2px 5px;
		border-radius: 3px;
		color: #d1d1d1b4;
		box-sizing: border-box;
		font-size: 12px;
	}
}
.NewConditions{
	display: flex;
	padding: 10px;
	align-items: center;
	p{
		color: #d1d1d1b4;
		margin-left: 10px;
	}
}
.huo{
	margin-bottom: 5px;
}
.sbutoon {
	margin-left: 10px;
}
</style>